<template>
  <div>
    <div style="display: flex;flex-direction: row; background: #F3F5F8">
      <div style="min-width: 300px; max-height: 900px; border-right: 1px solid #f1f1f1; margin-left: 5px; overflow: auto; background: #fff;">
        <div style="display: inline-block; padding: 10px 0 0 20px">
          <el-date-picker
            v-model="year"
            type="year"
            value-format="yyyy"
            @change="getDimensionTreeData"
            placeholder="选择年">
          </el-date-picker>
        </div>
        <el-tree
          style="padding-top: 10px;"
          class="filter-tree"
          :data="treeData"
          :props="defaultProps"
          default-expand-all
          @node-click="nodeClick"
          ref="tree">
        </el-tree>
      </div>
      <div style="width: calc(100% - 300px); min-height: 100%;">
        <div class="table-all">
          <!-- 按钮区 -->
          <div class="app-container table-box" >
            <div class="formTitle-root">
              <div class="form-title-p">指标信息</div>
            </div>
            <VForm
              ref="vformComponents"
              :form="formData.form"
              :options="formData.options"
              :rules="formData.rules"
              :labelWidth="formData.labelWidth"
              :rowspan="rowspan"
            ></VForm>

            <div class="formTitle-root">
              <div class="form-title-p">预警参数</div>
            </div>
            <VForm
              ref="vformComponents1"
              :form="formData1.form"
              :options="formData1.options"
              :labelWidth="formData1.labelWidth"
              :rowspan="rowspan"
            ></VForm>
            <div style="margin: 50px 20px 15px 15px;">
              <el-button type="primary" @click="sure" style="float: right" v-if="this.curThreeNo">保 存</el-button>
            </div>
          </div>
          </div>
        </div>
      </div>
    </div>
</template>

<script>
  import { dimensionTree,
    cityCheckTargetPage
  } from '@/api/risk/cityWaringResult'
  import {
    updateTargetRule,
    getCityCheckTargetDetail
  } from '@/api/risk/cityDiyResult'
  import SearchForm from '@/components/searchForm/index'
  import VTable from '@/components/VTable/index'
  import Pagination from '@/components/Pagination/index'
  import VForm from "@/components/VForm/index";
  export default {
    name: "targetDialog",
    components:{
      VTable,Pagination,SearchForm,VForm
    },
    props: {
      width: {
        type: String,
        default: "80%",
      },
      title: {
        type: String,
        default: "详情",
      },
      dialogVisible: {
        type: Boolean,
        default: false
      },
      cityCode:{ type:String ,default:null},
      openType:{}
    },
    computed: {
      isVisible: {
        get() {
          return this.dialogVisible
        },
        set() {
          this.close()
        }
      }
    },
    data() {
      return {
        year: new Date().getFullYear()+'',
        treeData: [],
        defaultProps: {
          children: 'children',
          label: 'labelNum'
        },
        curThreeNo:"",
        // 字典值
        cityCheckTypeDict:[],
        cityCheckResultDict:[],
        checkTypeMap: {"self": 1, "third": 2, "satisfied": 3},
        formData1:{
          form:{
            low:"",
            top:"",
            helpDesc:"",
          },
          options: [
            {
              title: "下限值",
              key: "low",
              type: "text",
            },
            {
              title: "上限值",
              key: "top",
              type: "text",
            },
            {
              title: "指标政策辅助描述",
              key: "helpDesc",
              type: "textarea",
              columnWidth:'w100',
            },
          ],
          labelWidth: "140px",
        },
        formData: {
          form: {

            oneTargetName:"",
            oneTargetNo:"",
            twoTargetName:"",
            twoTargetNo:"",
            threeTargetName:"",
            threeTargetNo:"",
            value:"",
            resultType:"",
            targetDescribe:"",
            result:"",
            getTime:"",
            source:"",
          },
          options: [
            {
              title: "体检指标名称",
              key: "threeTargetName",
              type: "text",
              disabled: true
            },
            {
              title: "体检分类",
              key: "checkType",
              type: "text",
              disabled: true
            },
            {
              title: "指标大类",
              key: "oneTargetName",
              type: "text",
              disabled: true
            },
            {
              title: "指标细类",
              key: "twoTargetName",
              type: "text",
              disabled: true
            },
            {
              title: "评价结果类型",
              key: "resultType",
              type: "text",
              disabled: true
            },
            {
              title: "指标解释",
              key: "targetDescribe",
              type: "textarea",
              columnWidth:'w100',
              disabled: true
            },
            {
              title: "评价标准",
              key: "criterion",
              type: "textarea",
              columnWidth:'w100',
              disabled: true
            },
          ],
          rules: {
          },
          labelWidth: "140px",
        },
        rowspan:1,
      }
    },
    methods: {
      nodeClick(data,node,self){
        console.log("da==============>",data, node ,self)
        // 仅查询具体指标
        if(data.type==3){
          this.curThreeNo = data.threeNo
           getCityCheckTargetDetail(data.id).then(res=>{
               if(res.code==200){
                  // 赋值
                   this.formData.form.oneTargetName =  res.data.oneTargetName
                   this.formData.form.twoTargetName = res.data.twoTargetName
                   this.formData.form.threeTargetName = res.data.threeTargetName
                   this.formData.form.value= res.data.value
                   let item = this.cityCheckResultDict.find(t=> t.name== res.data.resultType)
                   if(undefined != item){
                     this.formData.form.resultType= item.label
                   }
                   console.log("checkItem",res.data.checkType,this.cityCheckTypeDict)
                 let checkItem = this.cityCheckTypeDict.find(t=> t.value== res.data.checkType)
                 if(undefined != checkItem){
                   this.formData.form.checkType= checkItem.label
                 }
                   this.formData.form.targetDescribe = res.data.targetDescribe
                   this.formData.form.criterion = res.data.criterion
                   if(res.data.rules){
                     let rule = JSON.parse(res.data.rules)
                     this.formData1.form.low = rule[0].low
                     this.formData1.form.top = rule[0].top
                   }else {
                     this.formData1.form.low =""
                     this.formData1.form.top = ""
                   }
                   this.formData1.form.helpDesc = res.data.helpDesc
               }
           })
        }
      },
      sure(){
          if(!this.formData1.form.low && !this.formData1.form.top){
            this.$message.warning("请填写参数")
            return
          }
          if(!this.formData1.form.helpDesc){
            this.$message.warning("请填写指标政策辅助描述")
            return
          }
          let rule = [{low:this.formData1.form.low , top: this.formData1.form.top}]
          let params = {
            threeTargetNo:this.curThreeNo,
            rules:JSON.stringify(rule),
            helpDesc:this.formData1.form.helpDesc
          }
          updateTargetRule(params).then(res=>{
            if(res.code==200){
              this.$message.success("修改成功！")
            }
          })
      },
      getDimensionTreeData(){
        let data = {year:this.year,cityCode:this.cityCode, isRules:true}
        dimensionTree(data).then(res=>{
          if(res.code==200){
            this.treeData = res.data
          }
        })
      },
    },
    created(){
      this.cityCheckResultDict = []
      this.$commonJs.filterDataDict("cityCheckResultType",this.cityCheckResultDict)
      this.cityCheckTypeDict = []
      this.$commonJs.filterDataDict("cityCheckType",this.cityCheckTypeDict)
      this.getDimensionTreeData()
    },
    mounted(){
    }
  }
</script>

<style lang="scss" scoped>
  .table-all {
    display: flex;
    flex-direction: column;
    height: 100%;
    .table-box {
      flex: 1;
      display: flex;
      flex-direction: column;
      padding: 20px;
      margin: 0 10px;
      background: #fff;

    }
    @import "@/styles/element-variables.scss";
    .formTitle-root{
      padding: 10px 0;
      /*border-bottom: 1px solid #EFEFEF;*/
      font-size: 16px;
      position: relative;
      margin-bottom: 5px;
      .form-title-p{
        padding-left: 10px;
        border-left: 4px solid $--color-primary;
      }
    }
  }
</style>
